<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置WebGPU上下文</title>
</head>
<body>
  <!-- canvas：用来展示WebGPU渲染的结果 -->
  <canvas id="webgpu" width="500" height="500" style="background-color: black;    border: 1px solid grey;"></canvas>
  <script type="module">
      // 1. 初始化WebGPU
      const adapter = await navigator.gpu.requestAdapter();
      // 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
      // 通过虚拟GPU控制实际GPU
      const device = await adapter.requestDevice();

      // 配置WebGPU上下文，把id名为webgpu的Canvas元素作为WebGPU的画布
      const canvas = document.getElementById('webgpu');
      // 获取webgpu的上下文
      const context = canvas.getContext('webgpu');

      //获取浏览器默认的
      const format = navigator.gpu.getPreferredCanvasFormat();

      context.configure({
          device: device,// 将canvas画布和device关联起来
          format: format,// 设置颜色格式
      });
  </script>
</body>

</html>
